<!--
  费率显示卡片（ 根据支付类型区分 ）

  显示内容： 

  【   产品名称      拆分配置         】
  【   费率信息（组件）              】

  @author terrfly
  @site https://www.jeequan.com
  @date 2023/02/21 14:26
-->

<template>
  <!-- 包含费率信息 并且 包含产品（若没有产品，则不需要显示了 ） -->
  <div v-if="vdata.mergeFee && vdata.mergeFee.selectedWayCodeList.length > 0 ">
    <!--行 ： 分类名称 && 按钮  -->
    <div class="rate-header">
      <div class="rate-title" :class="{'rate-title-phone':isMobile}">{{ vdata.mergeFee.name }}产品费率</div> 
      
      <div class="rate-header-right">
        <!-- 只有 合并模式显示 右上角的 产品开关  -->
        <template v-if="vdata.mergeFee.isMergeMode && !isMobile">
          <!-- 合并模式的 勾选， 与 拆分模式的 数据结构不在整合， 单独维护， 互不干扰 -->
          <template v-for="(record, i) in vdata.mergeFee.selectedWayCodeList" :key="i">
            <a-checkbox :disabled="isMainReadonly()" :checked="record.checked" @change="(e) => record.checked = e.target.checked ? 1 : 0 ">{{ record.wayName }}</a-checkbox>
          </template>
        </template>

        <!-- 只有 商户自主进件时不需要显示， 其他都显示。  -->
        <template v-if="props.configMode != 'mchApplyment'">
          <a-button v-if="!vdata.mergeFee.isMergeMode" :class="{'button-phone':isMobile}" type="primary" style="margin-right: 15px" @click="mergeFeeFunc(true)">合并配置</a-button>
          <a-button v-if="vdata.mergeFee.isMergeMode" :class="{'button-phone':isMobile}" type="primary" style="margin-right: 15px" @click="mergeFeeFunc(false)">拆分配置</a-button>
        </template>
      </div>
    </div>
    
    <template v-if="vdata.mergeFee.isMergeMode && isMobile">
      <!-- 合并模式的 勾选， 与 拆分模式的 数据结构不在整合， 单独维护， 互不干扰 -->
      <div class="rate-header-bottom">
        <template v-for="(record, i) in vdata.mergeFee.selectedWayCodeList" :key="i">
          <a-checkbox :disabled="isMainReadonly()" :checked="record.checked" @change="(e) => record.checked = e.target.checked ? 1 : 0">{{ record.wayName }}</a-checkbox>
        </template>
      </div>
    </template>

    <!-- 配置卡片 ： 合并模式  -->
    <!--  readonlyItemWayCode 读取的只读数据 合并模式下， 任意一个即可。  -->
    <div v-if="vdata.mergeFee.isMergeMode">
      <JeepayPaywayRatePanelInnerPaywayTypeCardItem 
        :readonlyItemWayCode="vdata.mergeFee.selectedWayCodeList[0].wayCode" 
        :configMode="props.configMode" 
        :mainFeeByProps="vdata.mergeFee.mainFee" 
        :agentdefFeeByProps="vdata.mergeFee.agentdefFee" 
        :mchapplydefFeeByProps="vdata.mergeFee.mchapplydefFee" 
        :mergeFeeByProps="vdata.mergeFee"
      />
    </div>

    <!-- 配置卡片 ： 拆分模式 -->
    <div v-if="!vdata.mergeFee.isMergeMode">
      <template v-for="(record, i) in pvdata.allPaywayList.filter(vdata.mergeFee.filter)" :key="i">
        <JeepayPaywayRatePanelInnerPaywayTypeCardItem
          :configMode="props.configMode"
          :readonlyItemWayCode="record.wayCode"
          :wayName="record.wayName + ' (' + record.wayCode + ')'"
          :mainFeeByProps="pvdata.mainRateMap[record.wayCode]"
          :agentdefFeeByProps="pvdata.agentdefMap[record.wayCode]"
          :mchapplydefFeeByProps="pvdata.mchapplydefMap[record.wayCode]"
          :mergeFeeByProps="vdata.mergeFee"
        />
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">

import { ref, defineProps, reactive, inject, getCurrentInstance, onMounted } from 'vue'
  
  // 导入全局函数
const { $infoBox, $hasAgentEnt } = getCurrentInstance()!.appContext.config.globalProperties

// 组件注入
const props: any = defineProps({
  mergeFeeByProps: { type: Object, default: () => {} }, // 合并产品的信息 
  configMode: { type: String, default: '' },   // 模式
})
// 参数注入： 是否手机端
let isMobileInject : any = inject('isMobile')
let isMobile = (isMobileInject && isMobileInject.value) ? true : false

// 响应式对象
const vdata: any = reactive({
  mergeFee: null, // 合并产品的信息 
})

// 获取到上一级的 所有vdata参数 
let pdataInject : any = inject('pvdata')
let pvdata : any = pdataInject.value

onMounted( () => {
  vdata.mergeFee = props.mergeFeeByProps // 可编辑
})


function mergeFeeFunc(ctrl){
  vdata.mergeFee.isMergeMode = ctrl

  // 拆分 ---》  合并
  if(ctrl == true){

    vdata.mergeFee.selectedWayCodeList.forEach(el => {
      el.checked = pvdata.mainRateMap[el.wayCode].state == 1
    })
  }
  
  // 合并 ---》  拆分
  if(ctrl == false){
    vdata.mergeFee.selectedWayCodeList.forEach(el => {
      pvdata.mainRateMap[el.wayCode].state = el.checked ? 1 : 0
    })
  }


}


// 判断 main数据是否只读 
function isMainReadonly(){
  return props.configMode == 'mchApplyment' || props.configMode == 'agentSelf' 
}


</script>

<style lang="less" scoped>

.rate-card-wrapper {
  margin-bottom: 20px;
  position: relative;

  width: 100%;
  // height: 182px;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    height: 48px;
    border-radius: 5px 5px 0 0;
    background-color: #fafafa;
    .card-title {
      font-size: 14px;
      font-weight: 700;
    }
    .h-left {
      display: flex;
      align-items: center;
      div {
        display: flex;
        align-items: center;
      }
      div:nth-child(n + 2) {
        margin-left: 30px;
      }
    }
  }
  .rate-card-content {
    padding: 30px 30px 40px 30px;
  }
  .high-config {
    position: absolute;
    bottom: -20px;
    left: 30px;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 192px;
    height: 40px;
    cursor: pointer;
    border-radius: 5px;
    border: 1px solid #d9d9d9;
    background-color: #fafaff;
    user-select: none;
  }
}
.high-card {
  transform: translateY(-5px);
  border: 1px solid #d9d9d9;
  border-top: none;
  padding: 55px 30px 40px 30px;
  border-radius: 0 0 5px 5px;
}
.rate-header {
  padding-top: 30px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .rate-title {
    text-indent: 20px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 1px;
  }
}


.weChat-pay-list {
  display: flex;
  align-items: center;

  .w-pay-title {
    margin-bottom: 20px;
  }

  .w-pay-item:nth-child(n+2) {
    margin-left: 70px;
  }
}

.unPay-title-list {
  display: flex;
  margin-bottom: 20px;

  .unPay-title-item {
    width: 300px;
    font-size: 14px;
    font-weight: 700;
  }

  .unPay-title-item:nth-child(n + 2) {
    margin-left: 70px;
  }
}

.unPay-input-list {
  display: flex;
  margin-bottom: 20px;

  .unPay-input-item {
    width: 300px;
  }

  .unPay-input-item :deep .ant-input-group-wrapper:nth-child(1) {
    margin-bottom: 20px;
  }

  .unPay-input-item:nth-child(n + 2) {
    margin-left: 70px;
  }
}

.save-but-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 90px;

  .save-but-item {
    width: 160px;
  }


}

.h-right2-div{
    margin-left: 20px
  }

// 以下 为移动端样式 移动端所有样式类名 均以 -phone 结尾
.rate-title-phone{
  font-size: 14px !important;
  white-space: nowrap;
  text-indent:0 !important;
}
.button-phone{
  padding: 0 5px !important;
  font-size: 12px;
}
.rate-header-bottom{
  transform: translateY(-10px);
  width: 100%;
  overflow-x: auto;
}
</style>
